<template>
  <div class="app">
    <header class="app-header">
      <h1>灵璧县人工智能产业园环境保护监测</h1>
      <nav class="app-nav">
        <a href="#" :class="{ active: $route.path === '/monitor' }" @click.prevent="navigateTo('/monitor')">环境监测仪表盘</a>
        <a href="#" :class="{ active: $route.path === '/pollution-source' }" @click.prevent="navigateTo('/pollution-source')">环境污染源监测</a>
        <a href="#" :class="{ active: $route.path === '/pollution-tracing' }" @click.prevent="navigateTo('/pollution-tracing')">融合溯源</a>
        <a href="#" :class="{ active: $route.path === '/environment-evaluation' }" @click.prevent="navigateTo('/environment-evaluation')">环境预警评价</a>
        <a href="#" :class="{ active: $route.path === '/enterprise-profile' }" @click.prevent="navigateTo('/enterprise-profile')">企业环保画像</a>
      </nav>
    </header>
    
    <main class="app-content">
      <router-view />
    </main>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { onMounted } from 'vue'

const router = useRouter()

const navigateTo = (path: string) => {
  console.log('Navigating to:', path)
  // 使用 window.location.href 强制刷新页面
  window.location.href = path
}
</script>

<style scoped>
.app {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #0a2744 0%, #001529 100%);
}

.app-header {
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(0, 255, 255, 0.1);
}

.app-nav {
  display: flex;
  gap: 20px;
}

.app-nav a {
  color: #fff;
  text-decoration: none;
  padding: 5px 10px;
  border-radius: 4px;
}

.app-nav a:hover {
  background: rgba(0,255,255,0.1);
}

.app-nav a.active {
  color: #0ff;
  background: rgba(0,255,255,0.2);
}

.app-content {
  flex: 1;
  overflow: auto;
}
</style>
